<template>
  <div class="">
    <el-aside :width="asideWidth">
      <el-menu
        background-color="#545c64"
        text-color="#fff"
        :collapse="isCollapse"
        :collapse-transition="false"
      >
      <h3 v-show="!isCollapse">通用后端管理系统</h3>
      <h3 v-show="isCollapse">后台</h3>
        <el-menu-item v-for="(item,index) in noChildren" :key="index">
          <component class="icons" :is="item.icon"></component>
          <span>{{ item.label }}</span>
        </el-menu-item>

        <el-sub-menu v-for="(item,index) in hasChildren" :key="index">
          <template #title>
            <component class="icons" :is="item.icon"></component>
            <span>{{ item.label }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="(subItem,subIndex) in item.children" :key="subIndex">
              <component class="icons" :is="subItem.icon"></component>
              <span>{{ subItem.label }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script lang="ts" name="" setup>
import { ref,computed } from 'vue'
import { useAllDataStore } from '../stores'

const store = useAllDataStore()
const isCollapse = computed(()=>{
  return store.state.isCollapse
})
const asideWidth = computed(()=>{
  return store.state.isCollapse ? '64px' : '180px'
})

const list = ref([
  {
    path: '/home',
    name: 'home',
    label: '首页',
    icon: 'house',
    url: 'Home'
  },
  {
      path: '/mall',
      name: 'mall',
      label: '商品管理',
      icon: 'video-play',
      url: 'Mall'
  },
  {
      path: '/user',
      name: 'user',
      label: '用户管理',
      icon: 'user',
      url: 'User'
  },
  {
      path: 'other',
      label: '其他',
      icon: 'location',
      children: [
          {
              path: '/page1',
              name: 'page1',
              label: '页面1',
              icon: 'setting',
              url: 'Page1'
          },
          {
              path: '/page2',
              name: 'page2',
              label: '页面2',
              icon: 'setting',
              url: 'Page2'
          }
      ]
  }
])

const hasChildren = computed(()=>{
  return list.value.filter(item=>{
    return item.children
  })
})

const noChildren = computed(()=>{
  return list.value.filter(item=>{
    return !item.children
  })
})
</script>

<style lang="less" scoped>
  .icons{
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  .el-menu{
    border-right: none;
    h3{
      line-height: 48px;
      color: #fff;
      text-align: center;
      margin: 0;
    }
  }
  .el-aside{
    height: 100%;
    background-color: #545c64;
  }
</style>